<!DOCTYPE html >
<html	xmlns:th="http://www.thymeleaf.org"
		xmlns:layout="http://www.thymeleaf.org/extras/dialect"
		layout:decorate="admin/layout/layout"
>

<head>
	<title>短信历史列表</title>
</head>

<body class="scroll-container">
	<div layout:fragment="content">
		<div class="wrapper page-wrapper scrollable">
		<div class="page-content">
			<div class="row">
				<div class="col-lg-12">
					<div class="plate">

						<div class="plate-head  d-flex justify-content-between">
							<div class="plate-title">短信历史列表</div>
							<div class="plate-tools">
								<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter">高级搜索</a>
							</div>
						</div>

						<div class="plate-body clearfix">
							<form class="form-inline form-filter">
								<div class="row m-0">
									<div class="input-group mb-2 mr-sm-2 mb-sm-0">
										<input type="text" name="sender" class="form-control" placeholder="短信服务商">
										<input type="text" name="originSystem.name" class="form-control" placeholder="发送客户系统">
									</div>
									<div class="row m-0">
										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_start" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间起始">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_endDate" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间截止">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

									</div>
								</div>

								<div id="advanced-filter" class="collapse w-100">
								</div>

								<div class="row m-0 mt-2 w-100">
									<input id="test" class="btn btn-primary mr-2" type="button" value="过滤">
									<input class="btn btn-secondary mr-2" type="reset" value="重置">
									<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter"
									   style="padding-top: 12px; text-decoration: underline;">高级过滤</a>
								</div>
							</form>

							<table id="dataTable" class="table responsive table-bordered table-hover" cellspacing="0" width="100%">
								<thead>
								<tr>
									<th class="all">
										<label class="custom-control custom-checkbox">
											<input id="check-all" type="checkbox" class="custom-control-input">
											<span class="custom-control-indicator"></span>
										</label>
									</th>
									<th>接收手机</th>
									<th class="all" data-priority="1">短信内容</th>
									<th>发送状态</th>
									<th>应答结果</th>
									<th>服务商</th>
									<th>发送客户</th>
									<th>创建人</th>
									<th class="min-tablet-l">创建时间</th>
									<th data-priority="1">操作</th>
								</tr>
								</thead>
								<tbody></tbody>
								<tfoot></tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

		<script type="text/javascript" src="../../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
		<script type="text/javascript" src="../../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
		<script type="text/javascript" src="../../../static/asset/js/datatables.min.js" th:src="@{/asset/js/datatables.min.js}"></script>
		<script type="text/javascript" src="../../../static/asset/js/common/dataTables.ext.js" th:src="@{/asset/js/common/dataTables.ext.js}"></script>
		<script type="text/javascript" src="../../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

		<script>
            $(function () {
                /*var editor = new $.fn.dataTable.Editor({
                    ajax: './list/action',
                    table: "#dataTable",
                    idSrc: 'id',
                    fields: [
                        {name: 'id', type: 'hidden'},
                        {name: 'creator.id', type: 'hidden'},
                        {label: '接收手机:', name: 'toMobile'},
                        {label: '短信内容:', name: 'content', text:'textarea'},
                        {label: '发送状态:', name: 'smStatus', type: 'select',
                            options: [
                                {label: '未发送', value: 'NOT_SEND'},
                                {label: "发送中", value: 'SENDING'},
                                {label: "发送失败", value: 'SEND_FAILURE'},
                                {label: "发送成功", value: 'SEND_SUCCESS'}
                            ],
                            def: 'NOT_SEND'
                        },
                        {label: '应答结果:', name: 'sendResult', type: 'textarea'}
                    ]
                }).on('initCreate', function (e, o, action) {
                    //创建时隐藏字段。
                }).on('initEdit', function (e, o, action) {
                    //编辑时隐藏字段。
                });

                // Edit record
                $('#dataTable').on('click', 'a.editor_edit', function (e) {
                    e.preventDefault();

                    editor.edit($(this).closest('tr'), {
                        title: '编辑记录',
                        buttons: {
                            label: '提交',
                            className: 'btn-primary',
                            fn: function () {
                                editor.submit();
                            }
                        }
                    });
                });*/

                // Delete a record
                $('#dataTable').on('click', 'a.editor_remove', function (e) {
                    e.preventDefault();

                    editor.remove($(this).closest('tr'), {
                        title: '删除记录',
                        message: '确定删除该记录?',
                        buttons: {
                            label: '提交',
                            className: 'btn-danger',
                            fn: function () {
                                editor.submit();
                            }
                        }
                    });
                });

                var table = $('#dataTable').DataTable({
                    select: true,
                    autoWidth: false,
					ajax: {
                        "url": './list/data', // ajax source
                        "type": 'post'
                    },
                    "buttons": [
                       /* {text: '新增', extend: "create", className:"btn btn-primary", editor: editor},*/
                        {
                            text: '刷新',
                            className: 'btn btn-secondary btn-outline',
                            action: function (e, dt, node, config) {
                                dt.ajax.reload();
                            }
                        }
                    ],
                    columns: [
                        {
                            data: "id",
                            orderable: true,
                            visible: true
                        },
                        {
                            data: "toMobile",
                            searchable: true,
                            visible: true
                        },
                        {
                            data: "content",
                            searchable: true,
                            visible: true
                        },
                        {
                            data: "smStatus",
                            searchable: false,
                            visible: true
                        },
                        {
                            data: "sendResult",
                            searchable: false,
                            visible: true
                        },
						{
						    data:"sender",
                            searchable: false,
                            visible: true
						},
                        {
                            data: "originSystem",
                            searchable: false,
                            visible: true,
                            render: function (data, type, row, meta) {
                                return data ? data.name : "TMT用户中心";
                            }
                        },
                        {
                            data: "creator",
                            searchable: false,
                            visible: true,
                            render: function (data, type, row, meta) {
                                return data ? data.username : "";
                            }
                        },
                        {
                            data: "createTime",
                            searchable: false,
                            visible: true
                        },
                        {
                            data: "id",
                            searchable: false,
                            orderable: false,
                            visible: true
                        }
                    ],
                    order: [1, "desc"],
                    columnDefs: [
                        {
                            targets: [0],
                            render: function (data, type, row, meta) {
                                return '<label class="custom-control custom-checkbox">'
                                    + '	<input type="checkbox" class="custom-control-input">'
                                    + '	<span class="custom-control-indicator"></span>' + data
                                    + '</label>'
                            }
                        },
                        {
                            targets: [-1],
                            render: function (data, type, row, meta) {
                                var result = '<a href="javascript:;" class="editor_remove">删除</a>';
                                /*result += '&nbsp;|&nbsp;<a href="javascript:;" class="editor_remove">删除</a>';*/
                                return result;
                            }
                        }
                    ]
                });

                table.ext.filter.form('.form-filter');
                table.ext.filter.submit('#test');
                table.ext.batchCheck('#check-all');

                /* $('#example').dataTable({
                 "footerCallback": function( tfoot, data, start, end, display ) {
                 var api = this.api();
                 $( api.column(5).footer() ).html(
                 api.column(5).data().reduce(function ( a, b ) {
                 return App.floatVal(a) + App.floatVal(b);
                 }, 0)
                 );
                 }
                 });*/
            })
		</script>

		<!--{{> body-footer}}-->

	</div>
</body>
</html>